#@layout() #define main()
<div class="xp-layout">
	<div id="role_form" class="layui-form">
		<div class="layui-form-pane">
			<div class="layui-inline xp-input-container">
				<label class="layui-form-label">角色名称</label>
				<div class="layui-input-inline">
					<input class="layui-input" type="text" name="name" id="name">
				</div>
			</div>
			<div class="layui-inline xp-input-container">
				<button class="layui-btn" data-type="reload" id="findRoleList">
					<i class="layui-icon">&#xe615;</i> 查询
				</button>
				#if(bCanAdd)
				<button class="layui-btn" style="margin: 0px;" id="addRole">
					<i class="layui-icon">&#xe608;</i>添加角色
				</button>
				#end
			</div>
		</div>
	</div>
	<table id="role_table" lay-filter="table_tool"></table>
</div>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script type="text/html" id="switchTpl">
  <input type="checkbox" name="state" value="{{d.ID}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="state_filter" {{ d.STATE == 1 ? 'checked' : '' }}>
</script>
<script type="text/javascript">
	layui.use([ 'table', 'layer' ], function() {
		var table = layui.table, form = layui.form;

		//第一个实例
		table.render({
			id : 'role_table',
			elem : '#role_table',
			url : 'xpRole/pagingData',
			even: true,
			page : true,
			cols : [ [ {
				field : 'num',
				fixed : 'left',
				type : 'numbers'
			}, {
				field : 'NAME',
				title : '角色名称'
			}, {
				field : 'BZ',
				title : '说明'
			},  {
				field : 'STATE',
				title : '状态',
				templet : '#switchTpl',
				unresize : true
			}, {
				fixed : 'right',
				align : 'center',
				toolbar : '#barDemo'
			} ] ]
		});

		//监听工具条
		table.on('tool(table_tool)', function(obj) {
			var data = obj.data;
			if (obj.event === 'detail') {
				layer.msg('ID：' + data.ID + ' 的查看操作');
			} else if (obj.event === 'del') {
				layer.confirm('真的删除行么', function(index) {
					obj.del();
					layer.close(index);
				});
			} else if (obj.event === 'edit') {
				layer.open({
					type : 2,
					title : '编辑角色',
					area : [ '100%', '100%' ],
					shade : 0,
					id : 'roleEdit_iframe',
					content : 'xpRole/edit_ui?ID=' + data.ID,
					zIndex : layer.zIndex,
					success : function(layero) {
						layer.setTop(layero);
					}
				});
			}
		});

		var $ = layui.$, active = {
			reload : function() {

				//执行重载
				table.reload('role_table', {
					page : {
						curr : 1
					},
					where : {
						name : $('#name').val()
					}
				});
			}
		};

		$('#role_form .layui-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

		$('#addRole').on('click', function() {
			layer.open({
				type : 2,
				title : '添加角色',
				area : [ '100%', '100%' ],
				shade : 0,
				id : 'roleAdd_iframe',
				content : 'xpRole/add_ui',
				zIndex : layer.zIndex,
				success : function(layero) {
					layer.setTop(layero);
				}
			});
		});

		$('#help_btn').on('click', function() {
			layer.open({
				type : 1,
				shade : false,
				area : [ '50%', '50%' ],
				title : false, //不显示标题
				content : $('#help_content')
			});
		});

		//监听性别操作
		form.on('switch(state_filter)', function(obj) {
			// 			layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
			var state;
			if (obj.elem.checked == false) {
				state = 0;
			} else {
				state = 1;
			}
			var url = 'xpRole/editState';
			$.post(url, {
				ID : this.value,
				state : state
			}, function(res) {
				if (res.result == 1) {
					layer.tips(res.msg, obj.othis);
				} else {
				}
			});
		});
	});

	function reloadList() {
		$('#findRoleList').click();
	}
</script>


#end
